<template>
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :collapse="isCollapse" background-color="#545c64"
        text-color="#fff" active-text-color="#ffd04b" :router="true">
        <h3>{{isCollapse?'标题':'文学奖评审系统'}}</h3>
        <el-menu-item v-for="item in noChildren" :key="item.path" :index="item.path+''">
            <i :class="'el-icon-'+ item.icon"></i>
            <span slot="title">{{item.label}}</span>
        </el-menu-item>

        <el-submenu v-for="item in hasChildren" :key="item.path" :index="item.path+''">
            <template slot="title">
                <i :class="'el-icon-'+ item.icon"></i>
                <span slot="title">{{item.label}}</span>
            </template>
            <el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
                <el-menu-item :index="subItem.path">{{subItem.label}}</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
    </el-menu>
</template>

<script>
    export default {
        name: "HelloWorld",
        props: {
            msg: String,
        },
        data() {
            return {
                menu_pro1:[
                    {
                        path: '/home',
                        name: 'home',
                        label: '首页',
                        icon: 's-home',
                        url: 'Home/Home'
                    },
                    {
                        path: '/personcenter',
                        name: 'personcenter',
                        label: '个人中心',
                        icon: 'user',
                        url: 'personcenter/personcenter'
                    }, 
                    
                ],
                menu_pro2: [
                    {
                        path: '/home',
                        name: 'home',
                        label: '首页',
                        icon: 's-home',
                        url: 'Home/Home'
                    },
                    {
                        path: '/personcenter',
                        name: 'personcenter',
                        label: '个人中心',
                        icon: 'user',
                        url: 'personcenter/personcenter'
                    },
                    {
                        path: '/finalscoring',
                        name: 'FinalScoring',
                        label: '终审',
                        icon: 'user',
                        url: 'professor/finalscoring'
                    },
                    {
                        path: '/criterionView',
                        name: 'criterionView',
                        label: '评分规则查看',
                        icon: 'user',
                        url: 'criterionView/criterionView'
                    }, 
                ],
                menu_pro3: [
                    {
                        path: '/home',
                        name: 'home',
                        label: '首页',
                        icon: 's-home',
                        url: 'Home/Home'
                    },
                    {
                        path: '/personcenter',
                        name: 'personcenter',
                        label: '个人中心',
                        icon: 'user',
                        url: 'personcenter/personcenter'
                    },
                    {
                        path: '/firstscoring',
                        name: 'firstscoring',
                        label: '初审',
                        icon: 'user',
                        url: 'professor/firstscoring'
                    }, 
                    {
                        path: '/criterionView',
                        name: 'criterionView',
                        label: '评分规则查看',
                        icon: 'user',
                        url: 'criterionView/criterionView'
                    }, 
                ],
                menu_con:[
                    {
                        path: '/home',
                        name: 'home',
                        label: '首页',
                        icon: 's-home',
                        url: 'Home/Home'
                    },
                     {
                        path: '/projectupload',
                        name: 'projectupload',
                        label: '作品上传',
                        icon: 'upload',
                        url: 'projectupload/projectupload'
                    },
                    {
                        path: '/personcenter',
                        name: 'personcenter',
                        label: '个人中心',
                        icon: 'user',
                        url: 'personcenter/personcenter'
                    },
                    {
                        path: '/criterionView',
                        name: 'criterionView',
                        label: '评分规则查看',
                        icon: 'user',
                        url: 'criterionView/criterionView'
                    }, 
                    {
                        path: '/quryscore',
                        name: 'quryscore',
                        label: '成绩查询',
                        icon: 'search',
                        url: 'quryscore/quryscore'
                    },
                ],
                menu_admin: [
                    {
                        path: '/home',
                        name: 'home',
                        label: '首页',
                        icon: 's-home',
                        url: 'Home/Home'
                    },
                    {
                        path: '/professorManage',
                        name: 'mall',
                        label: '专家管理',
                        icon: 's-custom',
                        url: 'professorManage/professorManage'
                    },
                    {
                        path: '/contestants',
                        name: 'contestants',
                        label: '用户管理',
                        icon: 'user',
                        url: 'contestantsManage/contestantsManage'
                    },
                    {
                        path: '/personcenter',
                        name: 'personcenter',
                        label: '个人中心',
                        icon: 'postcard',
                        url: 'personcenter/personcenter'
                    },
                    {
                        path: '/distributefirst',
                        name: 'distributefirst',
                        label: '初审分配专家',
                        icon: 'coordinate',
                        url: 'distributefirst/distributefirst'
                    }, 
                    {
                        path: '/distributefinal',
                        name: 'distributefinal',
                        label: '终审分配专家',
                        icon: 'coordinate',
                        url: 'distributefinal/distributefinal'
                    }, 
                    {
                        path: '/firstscoreprogress',
                        name: 'FirstScoreProgress',
                        label: '初审进度',
                        icon: 'pie-chart',
                        url: 'firstscoreprogress/firstscoreprogress'
                    },
                    {
                        path: '/finalscoringprogress',
                        name: 'FinalScoringProgress',
                        label: '终审进度',
                        icon: 'mouse',
                        url: 'finalscoringprogress/finalscoringprogress'
                    },
                    {
                        path: '/prize',
                        name: 'prize',
                        label: '颁奖作品',
                        icon: 'medal',
                        url: 'prize/prize'
                    },
                    
                    {

                        label: '信息展示管理',
                        icon: 'more',
                        children: [
                            {
                                path: '/imageManage',
                                name: 'imageManage',
                                label: '图片管理',
                                icon: 'setting',
                                url: 'InfoManage/imageManage'
                            },
                            
                            {
                                path: '/AnnouncementManage',
                                name: 'AnnouncementManage',
                                label: '通知信息管理',
                                icon: 'setting',
                                url: 'AnnouncementManage/AnnouncementManage'
                            },{
                                path: '/criterionManage',
                                name: 'criterionManage',
                                label: '评分标准管理',
                                icon: 'setting',
                                url: 'criterionManage/criterionManage'
                            },]
                    }
                ]
            }
        },
        computed: {
            noChildren() {
                if(this.$store.state.userdata.roleName==='admin'){
                    return this.menu_admin.filter(item => !item.children)
                } 
                if (this.$store.state.userdata.roleName === 'contestant') {
                    return this.menu_con.filter(item => !item.children)
                }
                if (this.$store.state.userdata.roleId === '2') {
                    return this.menu_pro1.filter(item => !item.children)
                }
                if (this.$store.state.userdata.roleId === '3') {
                    return this.menu_pro2.filter(item => !item.children)
                }
                if (this.$store.state.userdata.roleId === '4') {
                    return this.menu_pro3.filter(item => !item.children)
                }
                
            },
            hasChildren() {
                if (this.$store.state.userdata.roleName === 'admin') {
                    return this.menu_admin.filter(item => item.children)
                }
                if (this.$store.state.userdata.roleName === 'contestant') {
                    return this.menu_con.filter(item => item.children)
                }
                if (this.$store.state.userdata.roleId === '2') {
                    return this.menu_pro1.filter(item => item.children)
                }
                if (this.$store.state.userdata.roleId === '3') {
                    return this.menu_pro2.filter(item => item.children)
                }
                if (this.$store.state.userdata.roleId === '4') {
                    return this.menu_pro3.filter(item => item.children)
                }
                
            },
            isCollapse() {
                return this.$store.state.isCollapse;
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    body{
        height: 100%;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 100vh;
        border: none;

    }
    .el-menu--collapse{
        height: 100%;
    }
    .el-menu {
        border: none;
        height: 100%;
    }

    .el-menu-item-group__title {
        padding: 0;
    }

    h3 {
        color: aliceblue;
        line-height: 30px;
    }

    span,
    .el-menu-item {
        
        font-size: 16px;
    }
</style>